<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包陷阱</title>
</head>

<body>
    <button id="btn">add</button>
    <script>
        /**
         * 闭包陷阱
         */
        function foo() {
            var el = document.getElementById('btn')
            /*
                当onclick点击事件触发以后，绑定的这个函数并不是出于foo()的函数内部
                而是在一个独立的作用域当中，这样就产生了闭包现象
                这种情况下的闭包，el.id变量的空间是无法回收的
                就会导致到内存的泄漏，
            */
            el.onclick = function () {
                console.log(el.id);
            }
        }
        foo()

        // 优化方案
        function foo() {
            var el = document.getElementById('btn')
            el.onclick = function () {
                console.log(el.id);
            }
            /**
             * document对象使用的时候本身会有一次的引用
             * 而当doecument对象赋值到el的时候，就相当于多一次引用
             * 在闭包的情况下，el的引用是一直存在的；
             * 因为引用计数算法，哪怕页面的DOM节点删除掉了，只要代码中还有引用的话，空间就一直无法释放，就会导致内存的泄漏
             * 那么，如果在函数的末尾把el置空，引用就消失，那么空间就释放了
            */

            el = null
        }

        foo()
    </script>
</body>

</html>